<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta name="description"
    content="Use Viewer to start building new applications or easily embed Cesium into existing applications." />
  <meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
  <title>交互与信息展示</title>
  <script type="text/javascript" src="../Sandcastle-header.js"></script>
  <script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js" nomodule></script>
  <script type="module" src="../load-cesium-es6.js"></script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
  <style>
    @import url(../templates/bucket.css);
  </style>
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="loadingOverlay">
    <h1>Loading...</h1>
  </div>
  <div id="toolbar"></div>
  <script id="cesium_sandcastle_script">
    window.startup = function (Cesium) {
      "use strict";
      //Sandcastle_Begin

      const viewer = new Cesium.Viewer("cesiumContainer", {

        animation:false,//动画组件
        timeline:false,//时间轴

        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(3957),
          requsestVertexNormal: true,
          requestWaterMask: true
        })
      });

      viewer._cesiumWidget._creditContainer.style.display = "none";


      //初始化相机信息
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(104.064, 30.582, 2000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90.0),
          roll: 0.0
        }
      });

      //鼠标交互与数据查询
      const entity = viewer.entities.add({
        id: 'planeLogo1',
        position: new Cesium.Cartesian3.fromDegrees(104.064, 30.582, 500),
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
          dimensions: new Cesium.Cartesian2(400, 300),
          material: "../../img/elecTower.jpeg",
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
        description: `<div><img width="100px" height="100px" src="../../img/panda.jpeg"></div>
        <div><h3>Panda</h3>
          <br/>
          <a href="http://sedc.powerchina.cn/" target="_blank">
            <button>Sedc</button>
          </a>
        </div>`
      });

      var res = "我是弹窗";

      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        var pick = viewer.scene.pick(movement.position);
        if (Cesium.defined(pick) && (pick.id.id === 'planeLogo1')) {
          alert(res)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //Sandcastle_End
      Sandcastle.finishedLoading();
    };
    if (typeof Cesium !== "undefined") {
      window.startupCalled = true;
      window.startup(Cesium);
    }
  </script>
</body>

</html>